<template>
  <view class="post-publish-page">
    <view class="form-card">
      <!-- 类型选择 -->
      <van-field
        :label-width="'120rpx'"
        :label="null"
        :value="typeText"
        placeholder="请选择"
        readonly
        is-link
        @click="showTypePicker = true"
      >
        <template #label>
          <text class="required">*</text>
          <text class="label">类型选择</text>
        </template>
      </van-field>
      <view class="divider"></view>
      <!-- 图片上传 -->
      <view class="uploader-label-wrap">
        <div>
          <text class="required">*</text>
          <text class="uploader-label">图片</text>
        </div>
        <span class="uploader-desc">最多支持上传5张，支持jpg/png/jpeg格式</span>
      </view>
      <view class="upload-value-wrap">
        <ImageUploader
          v-model="fileList"
          :max="5"
          :readonly="false"
          :customUpload="customUpload"
        />
      </view>
    </view>
    <!-- 帖子标题区块 -->
    <view class="post-title-wrap">
      <view class="post-title-label-row">
        <view>
          <text class="required">*</text>
          <text class="post-title-label">帖子标题</text>
        </view>
        <text class="post-title-count">
          <text :style="{ color: title.length > 20 ? '#f44' : '#888' }">{{
            title.length
          }}</text>
          /20
        </text>
      </view>
      <van-field
        :value="title"
        type="textarea"
        autosize
        placeholder="填写标题会更多人点赞哦~"
        custom-style="background: #f4f4f4;borderRadius: 8px"
        @change="onTitleChange"
      />
    </view>
    <!-- 帖子内容区块 -->
    <view class="post-content-wrap">
      <view class="post-content-label-row">
        <view>
          <text class="required">*</text>
          <text class="post-content-label">帖子内容</text>
        </view>
        <text class="post-content-count">
          <text :style="{ color: content.length > 2000 ? '#f44' : '#888' }">
            {{ content.length }}
          </text>
          /2000
        </text>
      </view>
      <van-field
        :value="content"
        type="textarea"
        autosize
        placeholder="说说此刻的心情~"
        custom-style="background: #f4f4f4;borderRadius: 8px"
        @change="onContentChange"
      />
    </view>
    <view class="footer-bar">
      <van-button
        class="footer-btn save"
        type="primary"
        color="#0C8D6A"
        block
        round
        @click="onSave"
      >
        保存
      </van-button>
    </view>
    <!-- 类型选择器 -->
    <van-popup
      :show="showTypePicker"
      position="bottom"
      @close="showTypePicker = false"
    >
      <van-picker
        show-toolbar
        :columns="typeOptions"
        @confirm="onTypeConfirm"
        @cancel="showTypePicker = false"
      />
    </van-popup>
  </view>
</template>

<script>
  import ImageUploader from '../../components/ImageUploader.vue'

  export default {
    components: { ImageUploader },
    data() {
      return {
        typeText: '',
        showTypePicker: false,
        typeOptions: ['日常', '提问', '分享', '活动'],
        fileList: [],
        title: '',
        content: ''
      }
    },
    methods: {
      customUpload(file) {
        // 可在此处实现自定义上传逻辑，返回Promise，resolve为最终图片对象
        // 示例：直接返回file（不上传）
        return Promise.resolve(file)
      },
      onTypeConfirm(val) {
        this.typeText = val.detail.value
        this.showTypePicker = false
      },
      onSave() {
        // 验证必填项
        if (!this.typeText) {
          uni.showToast({
            title: '请选择类型',
            icon: 'none'
          })
          return
        }

        if (this.fileList.length === 0) {
          uni.showToast({
            title: '请上传图片',
            icon: 'none'
          })
          return
        }

        if (!this.title.trim()) {
          uni.showToast({
            title: '请填写标题',
            icon: 'none'
          })
          return
        }

        if (this.title.length > 20) {
          uni.showToast({
            title: '标题不能超过20个字符',
            icon: 'none'
          })
          return
        }

        if (!this.content.trim()) {
          uni.showToast({
            title: '请填写内容',
            icon: 'none'
          })
          return
        }

        if (this.content.length > 2000) {
          uni.showToast({
            title: '内容不能超过2000个字符',
            icon: 'none'
          })
          return
        }

        // 执行保存逻辑
        console.log('保存数据:', {
          type: this.typeText,
          images: this.fileList,
          title: this.title,
          content: this.content
        })

        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      },
      onTitleChange(val) {
        this.title = val.detail
      },
      onContentChange(val) {
        this.content = val.detail
      }
    }
  }
</script>

<style></style>

<style scoped lang="scss">
  .post-publish-page {
    background: #f5f6fa;
    min-height: 100vh;
    padding-bottom: 160rpx;
  }
  .form-card {
    background: #fff;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }
  .required {
    color: #f44;
    font-size: 32rpx;
    margin-right: 8rpx;
    vertical-align: middle;
  }
  .label {
    color: #646566 !important;
  }
  .uploader-label-wrap {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx 0 32rpx;
  }
  .upload-value-wrap {
    margin: 32rpx;
  }
  .uploader-label {
    font-size: 28rpx;
    color: #646566;
    margin-right: 8rpx;
  }
  .uploader-desc {
    color: #888;
    font-size: 24rpx;
    margin-left: 12rpx;
  }
  .divider {
    height: 24rpx;
    background: #f5f6fa;
    width: 100%;
    margin: 0;
  }
  .post-title-wrap,
  .post-content-wrap {
    background: #fff;
    margin: 16rpx 0;
    padding: 32rpx;
  }
  .post-title-label-row,
  .post-content-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
  }
  .post-title-label,
  .post-content-label {
    color: #646566;
    font-size: 28rpx;
  }
  .post-title-count,
  .post-content-count {
    color: #888;
    font-size: 24rpx;
  }
  .post-title-count.over,
  .post-content-count.over {
    color: #f44;
  }
  .footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 32rpx 48rpx 32rpx;
    z-index: 10;
    box-shadow: 0px 7px 46px 0px rgba(0, 0, 0, 0.33);
  }
  .footer-btn.save {
    background: #0c8d6a;
    color: #fff;
    flex: 1;
    height: 88rpx;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin: 0 12rpx;
  }
</style>
